
import { Card, Flex } from "@/components/base";
import { Typography } from "@/components/typography";
import styles from './index.module.less';
import { ProfileOutlined } from "@ant-design/icons";

const { Text } = Typography;

export function ServiceDetails() {
    return (
        <Card >
            <Text size={18} strong style={{ marginBottom: 12, display: 'block', alignItems: 'center' }}>
                <ProfileOutlined style={{ marginRight: 8 }} />
                服务详情
            </Text>
            <Flex vertical gap={8} className={styles['service-details-container']}>
                <Flex vertical >
                    <Text strong>所需材料</Text>
                    <Text size={12} >专业洗发水、护发素、造型产品、吹风机、专业剪刀</Text>
                </Flex>

                <Flex vertical>
                    <Text strong>服务详情</Text>
                    <Text size={12} >专业洗发水、护发素、造型产品、吹风机、专业剪刀</Text>
                </Flex>

                <Flex vertical>
                    <Text strong>服务详情</Text>
                    <Text size={12} >专业洗发水、护发素、造型产品、吹风机、专业剪刀</Text>
                </Flex>
            </Flex>
        </Card>
    )
}